<template>
  <div>
    <el-upload
      :action="uploadAddress"
      class="uploader"
      accept="image/jpg,image/jpeg,image/png"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :data="params"
      :on-progress="uploadProgress"
      :on-success="uploadSuccess"
      :on-error="uploadError"
    >
      <el-image
        v-if="showImg"
        :src="showImg.indexOf('http')===0?showImg:imgPrefix + showImg + imgSuffix"
        class="show-img"
      />
      <i v-else class="el-icon-plus uploader-icon" />
      <div v-show="progressFlag" class="imgProgress">
        <el-progress type="circle" :percentage="progressPercent" />
      </div>
    </el-upload>
  </div>
</template>

<script>
import md5 from 'js-md5';
import { uploadToken } from '@/api/common';
export default {
  props: {
    imgUrl: {
      type: String,
      default: ''
    },
    nIndex: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      uploadAddress: process.env.VUE_APP_UPLOAD_ADDRESS,
      showImg: '',
      params: {},
      fileSize: 5 * 1024 * 1024, // 5MB
      progressPercent: 0,
      progressFlag: false
    };
  },
  mounted() {
    if (this.imgUrl) {
      this.showImg = this.imgUrl;
    }
  },
  methods: {
    async beforeUpload(file) {
      if (file.size > this.fileSize) {
        this.$message.warning('Image size exceeds 5MB limit');
        this.$refs.upload.abort();
        return false;
      }
      const res = await uploadToken();
      if (res.code !== 200) {
        this.$message.error('Network connection failure');
        return false;
      }
      this.params['token'] = res.data;
      this.params['key'] =
        md5(JSON.stringify(file)) + '.' + file.type.split('/')[1];
    },
    uploadSuccess(res) {
      this.showImg = res.key;
      this.progressFlag = false;
      this.progressPercent = 0;
      this.$emit('getImg', [res.key, this.nIndex]);
    },
    uploadError(error, file) {
      this.progressFlag = false;
      this.progressPercent = 0;
      const res = JSON.parse(JSON.stringify(error));
      if (res.status === 401) {
        this.$message.error('Authentication and authorization failure');
      } else {
        this.$message.error('network connection error');
      }
    },
    uploadProgress(event, file, fileList) {
      this.progressFlag = true;
      this.progressPercent = parseInt((event.loaded / event.total) * 100);
    }
  }
};
</script>

<style lang="scss" scoped>
.show-img {
  width: 50px;
  height: 50px;
}
::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  height: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  .uploader-icon {
    font-size: 16px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
.imgProgress {
  position: absolute;
  left: 0;
  top: 0;
  ::v-deep .el-progress-circle {
    width: 50px !important;
    height: 50px !important;
    background: #fff;
  }
}
</style>
